<template>
	<view class="searchindex-wrapper wrapperLayer">
		<view class="backTitlebar-wrapper colRange borderBox">
			<view class="fixedBox">
				<view class="topbarbox"></view>
				<view>
					<view class="headerNavigationbar rowRangeAve borderBox">
						<view class="leftContent rowCenter">
							<view class="backIcon rowRangeStart" @click="backUrl()">
								<image src="@/static/img/back.png" mode=""></image>
							</view>
							<view class="search-container rowRangeAve borderBox">
								<input class="searchInput" type="text" @input='searchInput' @confirm="toSearch()" v-model="searchText"
								 placeholder="输入商品或粘贴宝贝标题搜索" placeholder-class='searchplaceHolder' />
								<view class="rightIcon rowRangeAve" v-if="searchText">
									<view class="searchicon iconfont" @click="cleanSearch()">
										&#xe641;
									</view>
								</view>
							</view>
						</view>
						<view class="searchbtn rowCenterEnd" @click="toSearch()">
							<view>搜索</view>
						</view>
					</view>
				</view>
			</view>
			<view class="placeBox">
				<view class="topbarbox"></view>
				<view class="placeemptybox" style="height:90rpx;"></view>
			</view>
		</view>


		<view class="pageContent-container colRange borderBox">
			<view class="searchcontent" v-if="searchText==''">
				<view class="receiptNotes-container colRange borderBox">
					<view class="content-title">
						<view class="title-box">
							三步轻松获得优惠券
						</view>
					</view>

					<view class="steplist-container rowCenter">
						<view class="itembox rowCenter">
							<view class="defImg iconbox">
								<image src="../../static/img/search/copy.png" mode=""></image>
							</view>
							<view class="textTips">
								1.复制淘宝商品标题
							</view>
						</view>
						<view class="itembox rowCenter">
							<view class="defImg iconbox">
								<image src="../../static/img/search/search.png" mode=""></image>
							</view>
							<view class="textTips">
								2.粘贴搜索
							</view>
						</view>
						<view class="itembox rowCenter">
							<view class="defImg iconbox">
								<image src="../../static/img/search/receive.png" mode=""></image>
							</view>
							<view class="textTips">
								3.领卷购买
							</view>
						</view>
					</view>
				</view>


				<!-- 历史记录 -->
				<view class="historyWrap" v-if="showHistory && historyList.length>0">
					<view class="rowRangeAve">
						<view class="historyTitle">历史记录</view>
						<view class="iconbox iconfont" @click="deleteSearch()">
							&#xe608;
						</view>
					</view>
					<view class="historyCon">
						<view class="historyItem" v-for="(item,index) in historyList" :key="index" @click="toSearchContent(item)">
							{{item}}
						</view>
					</view>
				</view>
				
				<!-- 热门搜索 -->
				<view class="historyWrap" style="margin-top: 1rpx;" v-if="keywordList.length > 0">
					<view class="rowCenBet">
						<view class="historyTitle">热门搜索</view>
					</view>
					<view class="historyCon">
						<view class="historyItem" v-for="(item,index) in keywordList" :key="index" @click="toSearchContent(item.keyword)">
							{{item.keyword}}
						</view>
					</view>
				</view>
			</view>
		
			<view class="associationSearch-container colRange" v-else>
				<view class="associationList-container colRange">
					<block v-for="(items,index) in suggestionList" :key='index'>
						<view class="association-items rowCenter" @click="toSearchContent(items.kw)">
							<view>
								{{items.kw}}
							</view>
						</view>
					</block>
				</view>
			</view>
		</view>
		<u-modal v-model="showModel" show-cancel-button :content="'确定要清空搜索记录吗？'" @confirm="confirm" :async-close="true"></u-modal>
	</view>
</template>

<script>
	import cache from '../../utils/cache.js'
	export default {
		data() {
			return {
				searchText: '',
				showModel: false,
				//显示
				showHistory: true,
				//历史搜索
				historyList: [],
				//热门搜索
				keywordList: [],
				findList: '',
				bottomGoodsList: [],
				//联想词
				suggestionList: '',
				currentPage: 1,
				loadingState: false,
				loadstatus: 'loading',
				appinfo:false,
				platform:''
			}
		},
		onLoad(options) {
			this.getHistorySearch();
			this.getHotKeys();
		},
		onReachBottom() {

		},
		methods: {
			getHistorySearch() {
				debugger
				cache.getCache('historySearch').then(res => {
					console.log(res);
					debugger
					this.historyList = res
				}).catch(res => {
					this.historyList = []
				})
			},
			getHotKeys(){
				this.$u.api.hotKeys().then((res) => {
					if (res.code == 1){
						this.keywordList = res.data;
					}
				})
			},
			cleanSearch() {
				this.searchText = ''
			},
			//删除搜索
			deleteSearch() {
				this.showModel = true
			},
			//搜索内容
			toSearchContent(content) {
				this.searchText = content
				this.toSearch()
			},
			confirm() {
				uni.removeStorage({
					key: 'historySearch',
					success: res => {
						console.log('success');
						this.showModel = false
						this.historyList = []
					}
				});
			},
			//搜索
			searchInput(e) {
				debugger
				if (this.searchText.substring(0, 1).includes(' ')) {
					uni.showToast({
						title: "输入内容带有非法字符，请重新输入",
						duration: 1000,
						icon: "none"
					});
					this.searchText = null
				}else {
					this.suggestionSearch()
				}
			},
			//联想词
			suggestionSearch() {
				debugger
				this.$u.api.suggestions({
					keyWords: this.searchText,
					type:3
				}).then((res) => {
					if (res.code == 0){
						this.suggestionList = res.data;
					}
				})
			},
			//详情页
			goDetail(info) {
				debugger
				uni.navigateTo({
					url: '../goods/goodsDetail?info=' + encodeURIComponent(JSON.stringify(info))
				})
			},
			//返回
			backUrl() {
				uni.navigateBack({
					delta: 1
				})
			},
			toSearch() {
				if (this.searchText.substring(0, 1).includes(' ')) {
					uni.showToast({
						title: "输入内容带有非法字符，请重新输入",
						duration: 1000,
						icon: "none"
					});
					this.searchText = null
					return
				}
				if (this.searchText == '') {
					uni.showToast({
						title: "请输入搜索内容",
						duration: 1000,
						icon: "none"
					});
					this.searchText = ''
					return
				}
			
				if (this.historyList.length > 0) {
					var ifadd = this.historyList.some(items => {
						return items == this.searchText
					})
					if (!ifadd) {
						if (this.historyList.length < 10) {
							this.historyList.unshift(this.searchText)
						} else {
							this.historyList.unshift(this.searchText)
							this.historyList.pop()
						}
					}
				} else {
					this.historyList.unshift(this.searchText)
				}
				//设置缓存
				this.$nextTick(() => {
					cache.setCache('historySearch', this.historyList);
					uni.redirectTo({
						url: './result?searchText=' + this.searchText
					})
				})
			},
		}
	}
</script>

<style lang="scss">
	.searchindex-wrapper {
		width: 100%;
		background-color: #F0F1F7;
		.backTitlebar-wrapper {
			.placeBox {
				.placeemptybox {}
			}

			.fixedBox {
				width: 100%;
				position: fixed;
				top: 0;
				left: 0;
				z-index: 100;
				background-color: #FFFFFF;

				.headerNavigationbar {
					height: 90rpx;
					padding: 0 10px;

					.leftContent {
						.backIcon {
							width: 40rpx;
							height: 32rpx;
							z-index: 1;

							image {
								width: 17rpx;
								height: 32rpx;
							}
						}

						.search-container {
							width: 554rpx;
							height: 60rpx;
							background: #F0F1F7;
							border-radius: 30rpx;
							padding: 0 6rpx;

							.searchInput {
								width: 90%;
								height: 100%;
								font-size: 24rpx;
								font-weight: 400;
								color: #222222;
							}

							.searchplaceHolder {
								font-size: 24rpx;
								font-weight: 400;
								color: #999999;
							}

							.rightIcon {
								.searchicon {
									color: #222222;
								}
							}
						}
					}

					.searchbtn {
						font-size: 28rpx;
						font-weight: 500;
						color: #333333;
					}
				}

				.onlineStore-container {
					width: 100%;
					height: 80rpx;
					background-color: #FFFFFF;
					padding: 0 32rpx;

					.onlineStoreList {
						width: 100%;
						height: 100%;

						.store-items {
							margin-right: 60rpx;

							.store-name {
								font-size: 28rpx;
								font-weight: 500;
								color: #999999;
								margin-top: 20rpx;
							}

							.bordercontent {
								width: 30rpx;
								height: 4rpx;
								margin-top: 10rpx;
								border-radius: 2rpx;
								background-color: transparent;
							}
						}

						.store-items-active {
							.store-name {
								font-size: 28rpx;
								font-weight: 500;
								color: #FF4242;
							}

							.bordercontent {
								width: 30rpx;
								height: 4rpx;
								background-color: #FF4242;
							}
						}
					}
				}
			}
		}

		.pageContent-container {
			width: 100%;

			.receiptNotes-container {
				width: 100%;
				height: 130rpx;
				margin-bottom: 20rpx;
				padding: 0 32rpx;
				background-color: #FFFFFF;

				.content-title {
					width: 100%;
					font-size: 24rpx;
					font-weight: bold;
					color: #333333;
					margin-top: 15rpx;
				}

				.steplist-container {
					width: 100%;
					margin-top: 25rpx;

					.itembox {
						margin-right: 50rpx;

						.iconbox {
							width: 31rpx;
							height: 31rpx;
							margin-right: 10rpx;
						}

						.textTips {
							font-size: 26rpx;
							font-weight: 500;
							color: #333333;
							white-space: nowrap;
						}
					}
				}
			}

			.searchcontent {
				width: 100%;
			}

			.historyWrap {
				width: 100%;
				background-color: #FFFFFF;
				padding: 30rpx;

				.historyTitle {
					font-size: 28rpx;
					color: #333333;
					font-weight: bold;
				}

				.iconbox {
					font-size: 30rpx;
				}

				.historyCon {
					margin-top: 10rpx;
					display: flex;
					flex-wrap: wrap;

					.historyItem {
						font-size: 24rpx;
						line-height: 34rpx;
						font-weight: 500;
						color: #666666;
						border-radius: 27rpx;
						padding: 8rpx 28rpx;
						margin-top: 20rpx;
						margin-right: 24rpx;
						background-color: #F0F1F7;
						white-space: nowrap;
					}
				}
			}

			.guessLike-container {
				width: 100%;
				background-color: #FFFFFF;
				margin-top: 20rpx;

				.bottom-title {
					margin-top: 30rpx;
					margin-bottom: 20rpx;

					.texttitle {
						font-size: 28rpx;
						font-weight: 500;
						color: #FF4242;
						margin: 0 30rpx;
					}

					.bordercontent {
						width: 35rpx;
						height: 4rpx;
						background-color: #FF4242;
					}
				}

				.goodsList-container {
					width: 100%;

					.listbox {
						width: 100%;

						.goods-items-container {
							width: 100%;
							height: 240rpx;
							padding: 0 32rpx;
							border-bottom: 1rpx solid #F0F1F7;

							.left-imagecontent {
								width: 200rpx;
								height: 200rpx;
								border-radius: 8rpx;
								overflow: hidden;
							}

							.right-goodsinfo-container {
								margin-left: 20rpx;
								width: 460rpx;
								height: 200rpx;

								.goodsnameinfo-content {
									width: 100%;

									.typeIcon-content {
										width: 60rpx;
										height: 24rpx;
										margin-right: 5rpx;
										margin-top: 8rpx;
									}

									.tradename {
										width: 400rpx;
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
										font-size: 28rpx;
										font-weight: 400;
										color: #333333;
									}
								}


								.price-saleNums-container {
									width: 100%;
									margin-top: 30rpx;

									.left-price-box {
										.greytxt {
											font-size: 20rpx;
											font-weight: 400;
											color: #999999;
											line-height: 32rpx;
										}

										.rmb {
											font-size: 20rpx;
											font-weight: 600;
											color: #FF4242;
											line-height: 32rpx;
										}

										.pricebox {
											font-size: 28rpx;
											line-height: 34rpx;
											font-weight: 600;
											color: #FF4242;
										}
									}
								}

								.discounts-container {
									width: 100%;
									margin-top: 10rpx;

									.coupon-box {
										width: 102rpx;
										height: 30rpx;
										//background: url(../../static/images/goods/couponbac.png)no-repeat;
										background-size: 100% 100%;
										font-size: 20rpx;
										font-weight: 500;
										color: #FF4242;
									}

									.back-box {
										width: 100rpx;
										height: 30rpx;
										background: linear-gradient(-90deg, #7619EC, #A429F3);
										border-radius: 5rpx;
										margin-left: 8rpx;
										font-size: 20rpx;
										font-weight: 500;
										color: #FFFFFF;
									}
								}

								.saleNum-content {
									width: 100%;
									font-size: 20rpx;
									font-weight: 400;
									line-height: 34rpx;
									margin-top: 10rpx;
									color: #999999;
								}

								.shopEnter-bar {
									width: 100%;

									.storename {
										font-size: 20rpx;
										font-weight: 400;
										color: #999999;
									}

									.enterbtn {
										.enterStore {
											font-size: 20rpx;
											font-weight: 400;
											color: #333333;
											margin: 0 5rpx;
										}

										.arrow {
											width: 6rpx;
											height: 12rpx;
											margin-top: 4rpx;
										}
									}
								}
							}
						}
					}
				}
			}

			.associationSearch-container {
				width: 100%;
				background-color: #FFFFFF;

				.associationList-container {
					width: 100%;

					.association-items {
						width: 100%;
						height: 70rpx;
						box-shadow: 0px -1rpx 0rpx 0px #EFF1F7;
						margin-left:30rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #333333;
					}
				}
			}
		}
	}
</style>
